{% macro loadMore(pageIndex,pageSize,count,api) %}

<button class="btn btn-success btn-load-more" data-page-index="{{pageIndex}}">加载更多</button>

<script>
  const pageIndex = parseInt('{{pageIndex}}'); // 页面加载时获取当前页面
  const pageSize = parseInt('{{pageSize}}'); //
  const count = parseInt('{{count}}'); // 博客总量
  let nexPageIndex = pageIndex;

  if (pageSize * pageIndex >= count) {
    $(".btn-load-more").hide();
  };
  $(".btn-load-more").click(function () {
    // api/profile/loadMore/zhangsan/2
    ajax.get('{{api}}' + nexPageIndex, function (err, res) {
      if (err) {
        alert(err)
      }
      console.log(res)
      nexPageIndex = res.pageIndex; // 当前页码
      // 渲染dom
      res.blogList.forEach(item => {
        let $images = "";
        if (item.images) {
          $images = `<a href="${item.images}" target="_blank">
              <img src="${item.images}" alt="" width="150" class="blog-images">
            </a>`
        }

        const $loadMoreTemplate = `<div class="blog-item">
        <div class="user-info">
          <img src="${item.user.avatar}" alt="" class="user-avatar" width="50" style="border-radius: 50%">
        </div>
        <div class="blog-info">
          <div class="blog-content">
            <div class="boke">
              <a href="###" class="username">${item.user.nickName}</a>
              <span class="text">${item.content}</span>
            </div>
            ${$images}
          </div>
          <div class="creat-time">
            <p>${item.createAtFormat}</p>
          </div>
        </div>
      </div>
      <hr>`
        $('.item-wrapper').append($loadMoreTemplate);
      })

      // 如果显示的数量 = 博客的总量 隐藏按钮
      if (pageSize * (res.pageIndex) >= count) {
        $(".btn-load-more").hide();
      }
    })
  })
</script> {% endmacro %}